<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    </head>
    <style type="text/css">
        .box {
            padding: 10px;
        }

        .line-form.layui-input {
            width: 300px;
            display: inline-block;
        }
    </style>
    <body>
        <div class="box">
            <div class="line-form">
                <input type="text" placeholder="请输入标题" class="title layui-input">
                <button class="search layui-btn layui-btn-primary">搜索</button>
                <button class="add layui-btn layui-btn-normal">新增</button>
            </div>
            <table class="layui-table">
                <thead>
                    <tr>
                        <th>文件标题</th>
                        <th>文件类型</th>
                        <th>要求与内容</th>
                        <th>附件</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody class="tbody">
                </tbody>
            </table>
            <div id="page"></div>
            <img class="reviewImg" style="width: 400px; height: 400px;position: absolute; display: none;" />
        </div>
        <script src="https://lib.baomitu.com/jquery/3.0.0/jquery.js"></script>
        <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
        <script type="text/javascript">
            //页面载入事件
            layui.use(['laypage','layer'], () => {
                const laypage = layui.laypage
                const layer = layui.layer
                //发送查询的ajax请求
                let getData = (pageNum = 1, pageSize = 10, title = '') => {
                    $.ajax({
                        type: 'POST',
                        url: 'http://122.225.55.70:2666/fileManager/town/page',
                        data: {
                            pageNum,
                            pageSize,
                            title
                        },
                        dataJson: 'json',
                        success(res) {
                            if (res.code === '0') {
                                const data = res.data.list
                                //清空元素内的有子元素
                                $(".tbody").empty()
                                data.forEach((item, index) => {
                                    let div = $("<div></div>")
                                    if (item.filepath !== undefined && item.filepath !== '' &&
                                        item.filepath !== null) {
                                        const urlStr = item.filepath.substring(0, item.filepath
                                            .length - 1)
                                        const urls = urlStr.split(',')
                                        urls.forEach((childItem) => {
                                            let img = $(
                                                `<img src=http://122.225.55.70:2666/upload/${childItem}/>`
                                            )
                                            div.append(img)
                                        })
                                    }
                                    const tr = $(
                                        `<tr>
									<td>${item.title}</td>
									<td>${item.fileType}</td>
									<td>${item.content}</td>
									<td class=img-list></td>
									<td>${item.gmtCreate}</td>
									<td>
										<button data-id=${item.id} class="update layui-btn layui-btn-normal">修改</button>
										<button data-id=${item.id} class="del layui-btn layui-btn-primary">删除</button>
									</td>
								</tr>`
                                    )
                                    tr.find('td').eq(3).append(div)
                                    $(".tbody").append(tr)
                                })
                                //渲染分页主键
                                laypage.render({
                                    elem: 'page',
                                    count: res.data.total,
                                    curr: res.data.pageNum,
                                    jump(obj, first) {
                                        if (!first) {
                                            const title = $(".title").val()
                                            getData(obj.curr, obj.limit, title)
                                        }
                                    }
                                })
                            } else {
                                alert('系统异常，联系管理员')
                            }
                        }
                    })
                }
                //载入时调用获取列表数据的函数
                $(".search").click(() => {
                    //获取输入框的值
                    const title = $(".title").val()
                    getData(1, 10, title)
                })
                //点击事件
                $(".add").click(() => {
                    location.href = "./addOrUpdate.html"
                })
                //绑定获取鼠标进入事件
                $(document).on('mouseover', 'img', function(event) {
                    console.log(event)
                    const url = $(this).attr('src')
                    $('.reviewImg').attr('src',url)
                    $('.reviewImg').css({
                        display:'block',
                        left:(event.clientX+10)+'px',
                        top:(event.clientY-10)+'px'
                    })
                })
                $(document).on('mouseout', 'img', function(event) {
                        $('.reviewImg').css({
                            display:'none'
                        })
                })
                //删除动态
                $(document).on('click','.del',function(){
                    const id= $(this).data('id')
                    const flag=confirm("您确定要删除？")
                    if(flag){
                        $.ajax({
                            type:'DELETE',
                            url:`http://122.225.55.70:2666/fileManager/town/{id}`,
                            success(res){
                                if(res.code==='0'){
                                    alert('删除成功')
                                    getData()
                                }
                            }
                        })
                    }
                })
                getData()
                //点击事件
                $(document).on('click','.update',function(){
                    const id = $(this).data('id')
                    //存入本地缓存 id为主键 type为2代表修改
                    localStorage.setItem('id',id)
                    localStorage.setItem('type',2)
                    var index = layer.open({
                        type:2,
                        title:'本镇文件修改',
                        content:'addOrUpdate.html',
                        area:['100%','100%']
                    })
                    layer.full(index)
                })
                
            })
        </script>
    </body>
</html>

